<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
</head>

<body>
    <script>
        // 我们要把原生的js封装成一个promise对象，目的是能够使用。then.catch方法
        function js_ajax(url) {
            return new Promise((resolve, reject) => {
                let xhr = new XMLHttpRequest();
                xhr.open("get", url, true);
                xhr.send();
                xhr.onreadystatechange = function() {
                    // console.log(xhr.readyState);
                    // console.log(xhr.status);
                    if (xhr.readyState == 4) {
                        if (xhr.status == 200) {
                            let res = JSON.parse(xhr.responseText)
                            resolve(res)
                        } else {
                            reject("err")
                        }
                    }
                    //这样分开判断没有问题

                    // if(xhr.readyState==4&&xhr.status==200){
                    //     let res = JSON.parse(xhr.responseText)
                    //         resolve(res)
                    // }else{
                    //     reject("err")
                    // }
                    //这样写放在一起判断不对 因为onreadystatechangexhr.readyState==2时候就会触发一次 所以 会走 reject
                };
            });
        }
        js_ajax("https://api.it120.cc/small4/banner/list")
            .then((res) => {
                // console.log(res);
            })
            .catch((err) => {
                // console.log(err);
            });

        // 用原生的ajax解决回调地狱
        js_ajax("a.json").then(res => {
            console.log(res);
            return js_ajax("b.json")
        }).then(res => {
            console.log(res);
            return js_ajax("c.json")
        }).then(res => {
            console.log(res);
        })
    </script>
</body>

</html>

</html>